import React, { useState } from 'react'
import { View, Button, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'

const ImageUploader = () => {
  const [selectedImage, setSelectedImage] = useState('')
  const [generatedImage, setGeneratedImage] = useState('')

  const handleUpload = async () => {
    const res = await Taro.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera']
    })

    if (res.tempFilePaths.length > 0) {
      setSelectedImage(res.tempFilePaths[0])
    }
  }

  const handleGenerate = () => {
    // 模拟生成图像
    setGeneratedImage('https://via.placeholder.com/300x200?text=Generated+Image')
  }

  return (
    <View style={{ padding: '20px' }}>
      <Image
        src={selectedImage || 'https://via.placeholder.com/300x200?text=No+Image'}
        mode="aspectFill"
        style={{ width: '300px', height: '200px', border: '1px solid #ccc' }}
      />

      <View style={{ marginTop: '10px', display: 'flex', gap: '10px' }}>
        <Button onClick={handleUpload}>上传</Button>

        {selectedImage && (
          <Button onClick={handleGenerate}>生成</Button>
        )}
      </View>

      {generatedImage && (
        <Image
          src={generatedImage}
          mode="aspectFill"
          style={{ marginTop: '20px', width: '300px', height: '200px', border: '1px solid #ccc' }}
        />
      )}
    </View>
  )
}

export default function Index () {

  return (
    <ImageUploader />
  )
}
